<template>
	<view class="uwo-grid" :class="classObj" :style="styleObj">
		<slot></slot>
	</view>
</template>
<script>
/**
 * uwo-grid宫格布局
 * @description uwo-grid宫格布局
 * @property {Number} column 每一行的列数量；为 0 时等于固定大小
 * @property {String} theme=[default|card]  宫格的风格。可选项：default/card
 * @property {Boolean} border=[true|false]  	是否显示边框
 * @property {Number} gutter   	间隔大小
 * @property {String} align=[left|center] 内容对齐方式。可选项：left/center
 * @property {Boolean} hover=[true|false]  	是否开启点击反馈
 */
export default {
	name: 'uwoGrid',
	props: {
		column: {
			type: Number,
			default: 4
		},
		theme: {
			type: String,
			default: 'default'
		},
		border: {
			type: Boolean,
			default: false
		},
		gutter: {
			type: Number,
			default: 0
		},
		align: {
			type: String,
			default: 'center'
		},
		hover: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	provide() {
		return {
			grid: {
				column: this.column,
				border: this.border,
				align: this.align,
				gutter: this.gutter,
				hover: this.hover
			}
		};
	},
	computed: {
		classObj() {
			return [
				{
					'uwo-grid--card': this.theme === 'card',
					'uwo-grid--auto-size': this.column === 0,
					'uwo-grid--bordered': this.border && !this.gutter
				}
			];
		},
		styleObj() {
			if (this.column === 0) return [];
			const ans = [`padding: ${this.gutter}px;`, `grid-template-columns: repeat(${this.column}, 1fr)`, `grid-gap: ${this.gutter}px`];

			return ans;
		}
	},
	methods: {}
};
</script>
<style lang="scss" scoped>
.uwo-grid {
	position: relative;
	overflow: hidden;
	display: grid;
	box-sizing: border-box;

	&--bordered {
		&::after {
			position: absolute;
			box-sizing: border-box;
			content: ' ';
			pointer-events: none;
			right: 0;
			left: 0;
			top: 0;
			border-top: 1px solid var(--uwo-border-color, #e7e7e7);
			transform: scaleY(0.5);
		}
	}
	&--card {
		margin: 0 16px;
		border-radius: var(--uwo-radius-large, 9px);
		overflow: hidden;
	}
	&--auto-size {
		overflow: scroll;
		flex-wrap: nowrap;
		display: flex;
	}
}
</style>
